<template>
	<div>
		<div class="category-top-bg">
			<h1>{{topTitle.name}}</h1>
			<h5>{{topTitle.description}}</h5>
		</div>

		<div class="container">
			<el-empty description="暂无文章" v-if="articlesList.length==0" :image-size="300"
				image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png">
			</el-empty>

			<!-- 内容 部分-->
			<div class="content" v-if="articlesList.length!=0">
				<el-card v-for="(item,index) in articlesList" :key="index" style="margin: 10px 0;padding: 20px 0px;">
					<div class="content-title">
						<div style="float: left;font-weight: 700;font-size: 20px;">
							<span class="titleH" @click="gotoDateli(item)">{{item.title}}</span>
						</div>
						<div style="float: right;text-align: center;">
							<i class="iconfont icon-yanjing"></i>&nbsp;
							<span>{{item.viewCounts}}</span> <span
								style="margin-left: 5px;">{{item.commentCounts}}</span>
						</div>
					</div>

					<div class="content-summarize">
						概述 : {{item.summary}}
					</div>

					<div class="content-author">
						作者 : &nbsp;
						<span style="color: gray;">{{item.author}}</span>
					</div>
					<div class="content-tag">
						<div>
							标签 : <span class="tag" v-for="(i,indexs) in item.tags" @click="getTagList(i)">{{i.tagName}}</span>
						</div>
						<div>
							<i class="iconfont icon-shijian2"></i>
							<span style="color: gray;"> {{item.createDate}}</span>
						</div>
					</div>
				</el-card>

				<!-- 分页 部分-->
				<div style="width: 100%;margin: 0 auto;text-align: center;">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="params.pageNum" :page-sizes="[5,10,15]" :page-size="params.pageSize"
						layout="  prev, pager, next " :total="total">
					</el-pagination>
				</div>
			</div>

		</div>
		<goback :right="50" :bottom="100" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				topTitle: {},
				articlesList: [],
				params: {
					pageNum: 1,
					pageSize: 7,
					categoryId: null,
					tagId:null
				},
				total: 0
			};
		},
		mounted() {
			if(JSON.parse(this.$route.query.Is)=="category"){
				this.topTitle.name = JSON.parse(this.$route.query.list).categoryName
				this.params.categoryId = JSON.parse(this.$route.query.list).id
			}else{
				this.topTitle.name =JSON.parse(this.$route.query.list).name
				this.params.tagId=JSON.parse(this.$route.query.list).id
			}
			this.getArticles()
		},

		methods: {
			getArticles() {
				this.$api.home.getHomeList(this.params).then(res => {
					if (res.code == 200) {
						this.articlesList = res.data
						this.total = res.pageParams.total
					} else {
						this.$message.error("加载失败!")
					}
				})
			},
			getTagList(item){
			this.params.categoryId=null
			this.params.tagId=item.id
			this.topTitle.name=item.tagName
			this.getArticles()
			},
			handleSizeChange(pageSize) {
				this.params.pageSize = pageSize
				this.getArticles()
			},
			handleCurrentChange(pageNum) {
				this.params.pageNum = pageNum
				this.getArticles()
			},
			gotoDateli(item) {
				this.$router.push({
					name: "articleDetail",
					params:{
						id:item.id
					}
				})
			},
			
		},
	};
</script>

<style lang="less" scoped>
	.category-top-bg {
		min-width: 100%;
		height: 500px;
		background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/categ.jpg") no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		background-position-y: -50px;
		position: relative;

		h1 {
			text-align: center;
			position: relative;
			top: 250px;
			font-size: 30px;
			font-weight: 700;
			// color: white;
		}

		h5 {
			text-align: center;
			position: relative;
			top: 250px;
			margin-top: 10px;
			font-size: 15px;
		}
	}

	.container {
		width: 1250px;
		min-height: 500px;
		margin: 0 auto;

		// 内容分页部分 star
		.content {
			width: 1000px;
			height: auto;
			margin: 10px auto;
			box-sizing: border-box;
		}

		.content-title {
			width: 100%;
			box-sizing: border-box;
			cursor: pointer;
		}

		.titleH:hover {
			color: #95e7b3;
		}


		.content-summarize {
			clear: both;
			position: relative;
			top: 10px;
		}

		.content-author {
			position: relative;
			top: 20px;
			display: flex;
		}

		.content-tag .tag {
			height: 20px;
			line-height: 20px;
			background-color: rgba(103, 194, 58, .1);
			border-radius: 5px;
			border-color: rgba(103, 194, 58, .2);
			padding: 3px;
			color: #67c23a;
			margin: 0 5px;
			cursor: pointer;
		}

		.content-tag {
			position: relative;
			top: 30px;
			display: flex;
			justify-content: space-between;
		}

		// 内容分页部分 end
	}
</style>
